<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<base href="<%=basePath%>">

	<title>管理员登录</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">


	<link rel="stylesheet" type="text/css" href="../js/metronic/plugins/face/css/style.css"/>
	<script type="text/javascript" src="../js/metronic/plugins/face/js/jquery-1.4.4.min.js"></script>
	<style>
		body {
			height: 100%;
			background: #213838;
			overflow: hidden;
		}

		canvas {
			z-index: -1;
			position: absolute;
		}
	</style>


	<script src="../js/metronic/plugins/face/js/jquery.js"></script>
	<script src="../js/metronic/plugins/face/js/verificationNumbers.js"></script>
	<script src="../js/metronic/plugins/face/js/Particleground.js"></script>
	<script>
		$(document).ready(function () {
			//粒子背景特效
			$('body').particleground({
				dotColor: '#5cbdaa',
				lineColor: '#5cbdaa'
			});
			//验证码
			createCode();
			//测试提交，对接程序删除即可
			//$(".submit_btn").click(function(){
			// localhost.href="index.jsp";
			//});
		});
	</script>


	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		body {
			height: 100vh;
			background-position: center;
			overflow: hidden;
		}

		h1 {
			color: #fff;
			text-align: center;
			font-weight: 100;
			margin-top: 40px;
		}

		#media {
			width: 100%;
			height: 250px;
			margin: 10px auto 0;
			border-radius: 30px;
			overflow: hidden;
			opacity: 0.7px;
		}

		#video {

		}

		#canvas {
			display: none;
		}

		#btn {
			width: 160px;
			height: 50px;
			background: #03a9f4;
			margin: 70px auto 0;
			text-align: center;
			line-height: 50px;
			color: #fff;
			border-radius: 40px;
		}
	</style>
</head>

<body>
	<dl class="admin_login">
		<dt>
			<strong>CSI员工之家</strong><em></em> <strong>请把你的脸放摄像头面前</strong>
		</dt>
		<div id="media">
			<video id="video" width="100%" height="300" autoplay></video>
			<canvas id="canvas" width="530" height="300"></canvas>
		</div>
		<dd>
			<input type="button" id="btn-submit" value="立即注册"
			       class="submit_btn"/>
		</dd>

	</dl>
	<script type="text/javascript" src="../js/alert.js"></script>
	<script type="text/javascript">
		//var 是定义变量
		var video = document.getElementById("video"); //获取video标签
		var context = canvas.getContext("2d");
		var con = {
			audio: false,
			video: true,
			video: {
				width: 1980,
				height: 1024,

			}
		};

		//导航 获取用户媒体对象
		navigator.mediaDevices.getUserMedia(con)
			.then(function (stream) {
				try {
					video.src = window.URL.createObjectURL(stream);
				} catch (e) {
					video.srcObject = stream;
				}

				video.onloadmetadate = function (e) {
					video.play();
				}
			});

		$('#btn-submit').click(function () {
			//把流媒体数据画到convas画布上去
			context.drawImage(video, 0, 0, 530, 300);
			let base = getBase64();
			$.ajax({
				type: "POST",
				url: "/csi/user/api/registerFace",
				data: {"faceBase64": base},
				dataType: "json",
				success: function (result) {
					console.log(result);
					let data;
					try {
						data = checkResultAndGetData(result);
					} catch (error) {
						$.ligerDialog.warn(result.message, "注册失败");
						return;
					}
					$.MsgBox.Alert("消息", "注册成功");
				}
			});
			$('#btn-submit').unbind('click');
		});

		function checkResultAndGetData($result) {
			if ($result.success == false) {
				throw $result;
			}
			return $result.data;
		}

		function getBase64() {
			let imgSrc = document.getElementById("canvas").toDataURL(
				"image/png");

			return imgSrc.split("base64,")[1];

		}
	</script>


</body>
</html>
